import React, { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

import { useCityList } from '../hooks/useCity';

import store from '../redux/store';
import { changeCity } from '../redux/action/CityActionCreator';
import { clearCinemaList } from '../redux/action/CinemaActionCreator';
import { useAutoHandleTabbar } from '../hooks/useTabbar';

export default function City() {
  const { list } = useCityList();

  useAutoHandleTabbar();

  const navigate = useNavigate();

  const handleClick = useCallback(
    (city) => {
      let { cityId: id, name } = city;
      // 切换城市
      store.dispatch(changeCity({ id, name }));
      // 清空影院缓存
      store.dispatch(clearCinemaList());
      navigate('/cinema');
    },
    [navigate]
  );

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li
            key={item.cityId}
            onClick={() => handleClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}
